<template>
	<div class="component">
		<div class="inner">
			<card v-for="(mv, index) of list" :key="index"
						:image='mv.imgurl16v9'
						:imageWidth='140'
						:imageHeight='90'
						direction='row'
						class="item"
			>
				<div slot="top">
					<i class="iconfont icon-icon--"/>
					<span>{{ numberFormat(mv.playCount) }}</span>
				</div>
				<div slot="leftContent" class="content">
					<div class="name">
						<van-tag plain type="danger">MV</van-tag>
						<span>{{ mv.name }}</span>
					</div>
					<div class="publishTime">{{ mv.publishTime }}</div>
				</div>
			</card>
		</div>
	</div>
</template>
<script>
import { mv } from 'api/artist'
import Card from 'base/card'
import { numberFormat } from '@/utils'

export default {
	components: {
		Card
	},
	props: {
		id: [String, Number],
		pagination: Object
	},
	data() {
		return {
			list: [],
			promise: null
		}
	},
	methods: {
    getList() {
			if (!this.id) return
			const { limit, offset } = this.pagination
      this.promise = mv(this.id, limit, offset).then(res => {
				this.list = this.list.concat(res.mvs)
				return res.mvs
			})
			return this.promise
		},
		numberFormat(num) {
			return numberFormat(num)
		}
	},
	watch: {
		id() {
			this.getList()
		}
	}
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';

.component{
	width: 100%;
	min-height: 1px;
	.inner{
		padding: 0 10px;
		.item{
			margin-bottom: 10px;
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		.name{
			white-space: normal;
			.ellipsis(2);
		}
		.publishTime{
			font-size: @font-size-mini;
			margin-top: 10px;
		}
	}
}
</style>